<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>登录</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" type="text/css" href="${staticpath}/front/dist/css/sm.css">
    <link rel="stylesheet" type="text/css" href="${staticpath}/front/dist/css/sm-extend.css">
    <link rel="stylesheet" type="text/css" href="${staticpath}/front/dist/css/style.css">
    <link rel="stylesheet" type="text/css" href="${staticpath}/front/dist/css/base.css">
    <style type="text/css">
        ul:after {
            display: none !important;
        }

        li {
            background: #fff;
            border-radius: 4px;
            border: 1px solid #dadada;
        }

        li:first-child {
            margin-bottom: 15px;
        }

        .list-block .item-inner:after {
            display: none;
        }

        .logo-block {
            text-align: center;
            margin-top: 40px;
            width: 100%;
        }

        .logo-block img {
            width: 122px;
            width: 122px;
        }

        logo-block p {
            font-size: 16px;
            text-align: center;
        }
        .btn-block a{
            color: #acacac;

        }
        button.login-btn {
            color: #ffffff;
            background-color: #00b0ec;
            width: 100%;
            margin-top: 15px;
            border-bottom: 3px solid #0075aa;
        }

        .check-block {
            height:26px;
            margin-top: 8px;
            margin-bottom: 20px;
        }
        .check{
            float: left;
            text-align: right;
        }
        .check-block  a{
            float: right;
            color: #007AFF;

        }
        .btn-block span{
            border-radius: 4px;
            line-height: 40px;
            text-align: center;
            width: 46%;
            height: 40px;
            background-color: #ebebeb;
        }
        .page{
            background-color: #fff;
        }
        .or-line{
            height:16px;
            margin-top: 16px;
        }
        .or-line span{
            background-color: #ebebeb;
            margin-top:8px;
            float: left;
            height: 2px;
            width: 44%;
        }
        .or-line span:last-child{
            float: right;
        }
        .or-line p{
            color: #c6ccd2;
            font-size: 14px;
            float: left;
            margin: 0 0 0 8px;
        }
        .check input[type=radio]{
            width: 19px;
            height: 19px;
            border:none;
            background: url("${staticpath}/images/type-check.png");
            -webkit-appearance: none;
            vertical-align: middle;
            margin-right: 5px;
        }
        .check input[type=radio]:checked{
            background: url("${staticpath}/images/type-checked.png");

        }
    </style>
</head>
<body>
<div class="page">
    <div class="content">
        <div class="logo-block">
            <img src="${staticpath}/images/logo.png" alt=""/>
            <p>爱优享志愿者平台</p>
        </div>
        <form action="" autocomplete="off">
            <div class="content-block">
                <div class="list-block">
                    <ul>
                        <!-- Text inputs -->
                        <li>
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-input">
                                        <input type="number" name="phone"autocomplete="off" placeholder="请输入手机号">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-input">
                                        <input type="text" onfocus="this.type='password'" name="password" autocomplete="off" placeholder="请输入密码">
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <div class="check-block">
                        <div class="check">
                            <input type="radio" data-type="0"  checked >志愿者帐号
                            <input type="radio" data-type="1">机构帐号
                        </div>
                        <a href="${basepath}/front/account/toForgetPassword" class="pull-left">忘记密码?</a>
                    </div>
                </div>
                <button type="button" class="login-btn button button-big button-primary ">登录</button>
                <div class="or-line"><span></span><p>OR</p><span></span></div>
                <p class="btn-block">
                <span class="pull-left">
                    <a href="${basepath}/front/account/toVolunteerRegister">志愿者注册</a>
                </span>
                <span class="pull-right">
                    <a href="${basepath}/front/account/toOrganizeRegister">机构注册</a>
                </span>
                </p>
            </div>

        </form>


    </div>
</div>
<script type='text/javascript' src='${staticpath}/front/dist/js/lib/zepto.js' charset='utf-8'></script>
<script>
    $.config = {
        router: false
    }
</script>
<script type='text/javascript' src='${staticpath}/front/dist/js/lib/sm.js' charset='utf-8'></script>
<script type='text/javascript' src='${staticpath}/front/dist/js/lib/sm-extend.js' charset='utf-8'></script>
<script>
    $(function(){
        $('input').val('');
    })
    $(document).on('click', '.check-block input[type=radio]', function () {
        if ($(this).prop('checked', false)) {
            $(this).prop('checked', true)
            $(this).siblings('input[type=radio]').prop('checked', false);
        }
    })

    $('.login-btn').click(function () {
        var account = $("input[name='phone']").val(), password = $("input[name='password']").val();
        if (account == '' || password == '') {
            $.toast('登录信息不完整');
        } else if ($("input[data-type='0']").prop('checked') == true) {
            $.ajax({
                type: 'POST',
                url: '/front/account/login',
                dataType: 'json',
                data: {
                    phone: account,
                    password: password
                },
                success: function (data) {
                    if (data.success) {
                        $.toast('登录成功');
                        setTimeout(function () {
                            window.location.href = '/toHome';
                        }, 2000)
                    } else {
                        $.toast(data.message);
                    }

                }
            })
        } else {
            $.ajax({
                type: 'POST',
                url: '/front/organize/login',
                dataType: 'json',
                data: {
                    username: account,
                    password: password
                },
                success: function (data) {
                    if (data.success) {
                        $.toast('登录成功');
//                        sessionStorage.id=data.data.id;
//                        var str=JSON.stringify(data.data);
//                        sessionStorage.role=1;
//                        sessionStorage.obj=str;
                        setTimeout(function () {
                            window.location.href = '/toHome';
                        }, 2000)
                    } else {
                        $.toast(data.message);
                    }
                }
            })
        }
    })
</script>
<script>
    $.init();
</script>
</body>
</html>
